
<mat-card class="h-100">
  <mat-card-content>

    <div class="row">

      <div #outputDiv class="output">

        <div *ngIf="!messages || messages.length === 0" class="row">

          <div class="col-12 col-lg-3">
            <img
              src="assets/images/enterprise-ai-solutions.webp"
              alt="AINIRO.IO"
              class="d-block mx-auto exclude graphics">
          </div>

          <div class="col-12 col-lg-4 mb-4 intro-message">
            <ol class="mt-5 ps-3">
              <li class="pb-2">
                Connect to an existing database or create a new
                <a class="text-primary btn-link pointer" routerLink="/databases">here</a>
              </li>
              <li class="pb-2">
                Edit your database
                <a class="text-primary btn-link pointer" routerLink="/sql-studio">here</a>
              </li>
              <li class="pb-2">
                Create your API
                <a class="text-primary btn-link pointer" routerLink="/generator">here</a>
              </li>
              <li class="pb-2">
                Edit your code
                <a class="text-primary btn-link pointer" routerLink="/hyper-ide">here</a>
              </li>
              <li class="pb-2">
                Install plugins
                <a class="text-primary btn-link pointer" routerLink="/plugins">here</a>
              </li>
              <li class="pb-2">
                Get started with Machine Learning
                <a class="text-primary btn-link pointer" routerLink="/machine-learning">here</a>
              </li>
              <li class="pb-2">
                Create a chatbot
                <a class="text-primary btn-link pointer" routerLink="/chatbot-wizard">here</a>
              </li>
              <li class="pb-2">
                Access your frontend
                <a class="text-primary btn-link pointer" target="_blank" [href]="frontendUrl">here</a>
              </li>
              <li class="pb-2">
                Or simply click the Quick Start button below ...
              </li>
            </ol>

            <div>
              <button
                  mat-flat-button
                  class="quick-start"
                  (click)="startCreating()"
                  color="primary">
                  Quick Start
              </button>
            </div>

          </div>

          <div class="col-12 col-lg-5">
            <div class="video-wrapper">

              <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/Zt-XNN1mxDA"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>

            </div>
          </div>
        </div>

        <div
          *ngFor="let el of messages"
          [class]="'message ' + el.type"
          [innerHTML]="el.message | noSanitize">
        </div>
      </div>

      <form [class]="'col-12' + (is_answering ? ' hide_input' : '')" (ngSubmit)="submit()">

        <mat-form-field class="w-100">
          <textarea
            #queryTextarea
            matInput
            autocomplete="off"
            rows="4"
            name="query"
            [disabled]="is_answering"
            [(ngModel)]="query"
            (keydown.enter)="onKeydownEnter($event)"
            [appTypewriterPlaceholder]="[
              'Create a new Database to keep track of customers ...',
              'Create an API that integrates with HubSpot ...',
              'Create an AI chatbot with an escalate to human email function ...',
              'Create Hyperlambda that invokes the Chuck Norris API and returns a joke, and then execute the code ...',
              'Create a new full stack app, with a database, API and a frontend ...',
              'Create a colourful widget that allows me to collect emails and names from visitors ...'
            ]"
            [pauseAtStart]="100"
            [deletingSpeed]="10"
            [typingSpeed]="20"></textarea>
        </mat-form-field>

      </form>

    </div>

  </mat-card-content>
</mat-card>
